﻿@{
    ViewBag.Title = "BasicFile";
}
<style>
    .bar {
        height: 18px;
        background: green;
    }

    body {
        padding-top: 60px;
    }
</style>
<div id="body">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h2>My Demo</h2>
            </hgroup>
        </div>
    </section>
      <section class="content-wrapper main-content clear-fix">
        <h3>Do we have some files here for uploads:</h3>
        <div>
            <form action="/api/Azure" enctype="multipart/form-data">
                <div class="row fileupload-buttonbar">
                    <div class="span7">
                        <div class="well">
                            <i class="icon-plus"></i><span>&nbsp;&nbsp;Add files...</span>
                            <input type="file" id="fileupload" name="fileupload" accept="image/*" multiple="multiple">
                            <button id="btnUploadAll" class="btn btn-success pull-right" type="button">
                                Upload All</button>
                            <div class="clearfix">
                            </div>
                            <div class="progress">
                                <div class="bar" id="overallbar" style="width: 0%">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span7">
                        <div class="well hide" id="filelistholder">
                        </div>
                    </div>
                    <div class="span7">
                    </div>
                </div>
            </form>
            <div>
                <hr />
                <div id="cooldebug"></div>

            </div>
        </div>
    </section>
</div>
@section scripts
{
    <script src="~/Scripts/jquery.fileupload.js"></script>
    <script src="~/Scripts/jquery.fileupload-ui.js"></script>
    <script src="~/Scripts/jquery.iframe-transport.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script type="text/javascript">
        $(function () {
          
            $('#fileupload').fileupload({
                dataType: "json",
                url: "/api/Azure",
                maxFileSize: 500000000,
                resizeMaxWidth: 1920,
                resizeMaxHeight: 1200,
                /*limitConcurrentUploads: 6,*/
                sequentialUploads: false,
                /*
                progressInterval: 25,
                maxChunkSize: 100000,*/
                add: function (e, data) {
                    $('#filelistholder').removeClass('hide');
                    data.context = $('<div />').text(data.files[0].name).appendTo('#filelistholder');
                    $('</div><div class="progress"><div class="bar" style="width:0%"></div></div>').appendTo(data.context);
                    $('#btnUploadAll').click(function () {
                        //alert("fine");
                        data.submit();
                    });
                },
                done: function (e, data) {
                    data.context.text(data.files[0].name + '... Completed');
                    $('</div><div class="progress"><div class="bar" style="width:100%"></div></div>').appendTo(data.context);

                    var progress = 100;
                    $('#overallbar').css('width', progress + '%');
                },
                progressall: function (e, data) {
                    //alert("progress");
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#overallbar').css('width', progress + '%');
                },
                progress: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    data.context.find('.bar').css('width', progress + '%');
                    $("#cooldebug").append($("<div>Progress :  " + progress + "</div>"));
                }
            });
        });
    </script>
}